<!--
 * @Description: 函数作用说明
 * @Author: zdq
 * @Date: 2025-05-31 10:19:40
 * @LastEditTime: 2025-06-09 00:51:17
 * @LastEditors: zdq
 * @Reference: 
-->
<template>
  <div
    v-loading="loading || getOrderListLoading"
    element-loading-text="加载中..."
    style="position: relative; display: flex; flex-direction: column; height: 100%"
  >
    <div class="top">
      <div class="nav">
        <order-list-status-tabs
          ref="orderListStatusTabsRef"
          @change-status="handleChangeFilterStatus"
        />
      </div>
    </div>
    <div class="app-container" style="height: 100%">
      <div
        class="app-container-inner"
        style="display: flex; flex-direction: column; height: 100%; border-radius: 2px"
      >
        <div class="filter_btn_group">
          <!--搜索条件-->
          <div class="search">
            <Filter
              ref="getListFilterRef"
              @get-list="getOrderListData"
              @change-status="handleFilterChangeOrderStatus"
            >
              <h-button type="primary" @click="getOrderListData">
                <el-icon>
                  <Search />
                </el-icon>
                搜索
              </h-button>
              <h-button @click="clearValue">
                <el-icon>
                  <RefreshRight />
                </el-icon>
                重置
              </h-button>
            </Filter>
          </div>
          <!-- 新建工单、分配客服、分派服务商、完成、取消、更多 -->
          <div class="btn_group">
            <router-link to="/order/new">
              <h-plain-button>新建工单</h-plain-button>
            </router-link>
            <h-plain-button :disabled="selecttion.length <= 0" @click="handleAssignNetworkClick">
              分派服务商
            </h-plain-button>
            <h-plain-button
              :disabled="selectedTableData.length <= 0"
              @click="onShowUpdateNetworkModal"
            >
              改派服务商
            </h-plain-button>
            <h-plain-button :disabled="selecttion.length <= 0" @click="noteModalVisible = true">
              服务过程
            </h-plain-button>
            <h-plain-button
              :disabled="selectedTableData.length !== 1"
              @click="updateSettlementPriceModalVisible = true"
            >
              改结算价
            </h-plain-button>
            <h-plain-button
              :disabled="selecttion.length <= 0"
              @click="assignCustomerServiceModalVisible = true"
            >
              分配客服
            </h-plain-button>
            <h-plain-button :disabled="selecttion.length <= 0" @click="reminderModalVisible = true">
              催单
            </h-plain-button>
            <h-plain-button :disabled="selecttion.length <= 0" @click="archiveModalVisible = true">
              归档
            </h-plain-button>
            <h-plain-button :disabled="selectedTableData.length !== 1" @click="copyOrder">
              复制下单
            </h-plain-button>
            <h-plain-button @click="onExport">导出 </h-plain-button>
            <router-link to="/order/orderExcelImport">
              <h-plain-button>导入 </h-plain-button>
            </router-link>
            <el-dropdown trigger="click">
              <h-button>
                <span>更多</span>
                <el-icon style="margin-left: 5px">
                  <ArrowDown />
                </el-icon>
              </h-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    :disabled="selecttion.length <= 0"
                    @click="timeoutTipModalVisible = true"
                  >
                    超时提醒
                  </el-dropdown-item>
                  <el-dropdown-item
                    :disabled="selecttion.length <= 0"
                    @click="finishOrderModalVisible = true"
                  >
                    完成
                  </el-dropdown-item>
                  <el-dropdown-item
                    :disabled="selecttion.length <= 0"
                    @click="cancelOrderModalVisible = true"
                  >
                    取消
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="selecttion.length <= 0" @click="handlePending">
                    挂起/解除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <!-- 筛选条件 -->
        <div style="width: 100%">
          <ShowTooltip
            v-if="moduleOptions.length > 0"
            :content="`工单类型: ${condition1.map((o) => o.name).join('、')}`"
            className="fs20"
            refName="testName1"
            @close="tagClose(1)"
          />
          <ShowTooltip
            v-if="gradeOptions.length > 0"
            :content="`等级: ${condition3.map((o) => o.name).join('、')}`"
            className="fs20"
            refName="testName3"
            @close="tagClose(3)"
          />
          <ShowTooltip
            v-if="sourceOptions.length > 0"
            :content="`工单来源: ${condition4.map((o) => o).join('、')}`"
            className="fs20"
            refName="testName4"
            @close="tagClose(4)"
          />
          <ShowTooltip
            v-if="networkOptions.length > 0"
            :content="`服务商: ${condition5.map((o) => o.name).join('、')}`"
            className="fs20"
            refName="testName5"
            @close="tagClose(5)"
          />
          <ShowTooltip
            v-if="(minCost || minCost == 0) && (maxCost || maxCost == 0)"
            :content="`费用:￥ ${Number(minCost).toFixed(2)}~￥${Number(maxCost).toFixed(2)}`"
            className="fs20"
            refName="testName6"
            @close="tagClose(6)"
          />
          <ShowTooltip
            v-if="(minTime || minTime == 0) && (maxTime == 0 || maxTime) && radio4"
            :content="`服务时长: ${minTime}~${maxTime}${radio4 == 1 ? '小时' : '天'}`"
            className="fs20"
            refName="testName7"
            @close="tagClose(7)"
          />
          <ShowTooltip
            v-if="customerOptions.length > 0"
            :content="`客服: ${condition8.map((o) => o.name).join('、')}`"
            className="fs20"
            refName="testName8"
            @close="tagClose(8)"
          />
        </div>
        <!-- 列表 -->
        <div class="table-list" style="flex: 1; position: relative">
          <el-table
            ref="tableList"
            :border="true"
            :data="orderList"
            height="100%"
            resizable
            row-key="id"
            stripe
            style="position: absolute"
            @selection-change="handleChange"
            @row-dblclick="goDetail"
            @row-click="rowClick"
          >
            <!--选择-->
            <el-table-column type="selection" width="40" />

            <!-- 序号 -->
            <el-table-column fixed="left" label="序号" type="index" width="50" :align="'center'" />

            <!-- 工单字段 -->
            <template v-for="item in OrderListTable" :key="item.code">
              <el-table-column
                v-if="item.showColumn"
                :align="item.code == 'totalPrice' ? 'right' : 'left'"
                :fixed="item.freezeColumn"
                :label="item.name"
                :prop="item.code"
                :width="tableColumnWidth[item.code] || '100'"
                :show-overflow-tooltip="item.code !== 'status'"
              >
                <template #header>
                  <!-- 工单类型 -->
                  <template v-if="item.code === 'module'">
                    {{ item.name }}
                    <el-popover ref="popoverDom2" :width="250" placement="bottom" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="search-input">
                        <el-input
                          v-model="ordeModule"
                          clearable
                          placeholder="搜索工单类型 按Enter确认"
                          @clear="onclearinput(1)"
                          @keyup.enter="confirmSearch(1)"
                        />
                      </div>
                      <div class="checkboxs">
                        <el-checkbox v-model="checkAll1" @change="changeChecked1">全选</el-checkbox>
                        <el-scrollbar class="checkboxs-scrollbar" max-height="350px">
                          <el-checkbox-group v-model="moduleOptions">
                            <el-checkbox v-for="item in modules" :key="item.id" :value="item.id">
                              {{ item.name }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </el-scrollbar>
                      </div>
                    </el-popover>
                  </template>

                  <!--  等级 -->
                  <template v-if="item.code === 'level'">
                    {{ item.name }}
                    <el-popover ref="popoverDom4" :width="250" placement="bottom" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="search-input">
                        <el-input
                          v-model="orderGrade"
                          clearable
                          placeholder="搜索等级"
                          @clear="onclearinput(3)"
                          @keyup.enter="confirmSearch(3)"
                        />
                      </div>
                      <div class="checkboxs">
                        <el-checkbox v-model="checkAll3" @change="changeChecked3">全选</el-checkbox>
                        <el-scrollbar class="checkboxs-scrollbar" max-height="350px">
                          <el-checkbox-group v-model="gradeOptions">
                            <el-checkbox v-for="item in grades" :key="item.id" :value="item.id">
                              {{ item.name }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </el-scrollbar>
                      </div>
                    </el-popover>
                  </template>

                  <!-- 工单总费用 -->
                  <template v-if="item.code === 'totalPrice'">
                    <div style="display: flex; justify-content: flex-start; gap: 5px">
                      {{ item.name }}
                      <el-popover
                        ref="popoverDom5"
                        :width="250"
                        placement="bottom"
                        trigger="click"
                        @hide="confirmSearch(4)"
                      >
                        <template #reference>
                          <span class="iconfont icon-shaixuan" style="margin: 0"></span>
                        </template>
                        <div class="values flex-justify-between">
                          <el-input
                            v-model="minCost"
                            class="cost-input"
                            clearable
                            placeholder="最小值"
                            @input="minCost = minCost.replace(/[^0-9]/g, '')"
                          />
                          <span>~</span>
                          <el-input
                            v-model="maxCost"
                            class="cost-input"
                            clearable
                            placeholder="最大值"
                            @input="maxCost = maxCost.replace(/[^0-9]/g, '')"
                          />
                        </div>
                      </el-popover>
                    </div>
                  </template>

                  <!-- 服务商  -->
                  <template v-if="item.code === 'network'">
                    {{ item.name }}
                    <el-popover ref="popoverDom6" :width="250" placement="bottom" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="radios change-radio">
                        <el-radio-group v-model="networkType">
                          <el-radio :value="''">查询全部</el-radio>
                          <el-radio :value="1">已派单</el-radio>
                          <el-radio :value="0">未派单</el-radio>
                        </el-radio-group>
                      </div>
                      <div v-show="networkType === 1" class="checkboxs">
                        <div class="search-input" style="margin-right: 15px">
                          <el-input
                            v-model="workName"
                            clearable
                            placeholder="搜索服务商名称 按Enter确认"
                            @clear="onclearinput(5)"
                            @keyup.enter="confirmSearch(5)"
                          />
                        </div>
                        <el-checkbox v-model="checkAll5" @change="changeChecked5">全选</el-checkbox>
                        <el-scrollbar class="checkboxs-scrollbar" max-height="350px">
                          <el-checkbox-group v-model="networkOptions">
                            <el-checkbox
                              v-for="item in networkSelectData"
                              :key="item.id"
                              :value="item.id"
                            >
                              {{ item.name }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </el-scrollbar>
                      </div>
                    </el-popover>
                  </template>

                  <!--  服务时长 -->
                  <template v-if="item.code === 'totalServiceTime'">
                    {{ item.name }}
                    <el-popover
                      ref="popoverDom7"
                      :width="250"
                      placement="bottom"
                      trigger="click"
                      @hide="confirmSearch(6)"
                    >
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="radios change-radio">
                        时间单位
                        <el-radio-group v-model="radio4" class="display_flxe">
                          <el-radio :value="1">小时</el-radio>
                          <el-radio :value="2">天</el-radio>
                        </el-radio-group>
                      </div>
                      <div class="values flex-justify-between">
                        <el-input
                          v-model="minTime"
                          class="time-input"
                          clearable
                          placeholder="最小值"
                        />
                        <span>~</span>
                        <el-input
                          v-model="maxTime"
                          class="time-input"
                          clearable
                          placeholder="最大值"
                        />
                      </div>
                    </el-popover>
                  </template>

                  <!-- 工单来源 -->
                  <template v-if="item.code === 'source'">
                    {{ item.name }}
                    <el-popover ref="popoverDom8" :width="250" placement="bottom" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="checkboxs">
                        <el-checkbox v-model="checkAll4" @change="changeChecked4">全选</el-checkbox>
                        <el-checkbox-group v-model="sourceOptions">
                          <el-checkbox
                            v-for="item in sources"
                            :key="item.value"
                            :value="item.value"
                          >
                            {{ item.title }}
                          </el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </el-popover>
                  </template>

                  <!-- 节点时效 -->
                  <template v-if="item.code === 'serviceTime'">
                    {{ item.name }}
                    <el-popover :width="300" placement="bottom" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div>
                        <el-radio-group v-model="serviceTimeFilter" @change="getOrderListData">
                          <el-radio value="">查询全部</el-radio>
                          <el-radio value="0">未超时</el-radio>
                          <el-radio value="1">已超时</el-radio>
                        </el-radio-group>
                      </div>
                    </el-popover>
                  </template>

                  <!-- 客服 -->
                  <template v-if="item.code === 'emp'">
                    {{ item.name }}
                    <el-popover ref="popoverDom9" :width="250" placement="bottom" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="search-input">
                        <el-input
                          v-model="customer"
                          clearable
                          placeholder="搜索客服"
                          @clear="onclearinput(8)"
                          @keyup.enter="confirmSearch(8)"
                        />
                      </div>
                      <div class="checkboxs">
                        <el-checkbox v-model="checkAll8" @change="changeChecked8">全选</el-checkbox>
                        <el-scrollbar class="checkboxs-scrollbar" max-height="350px">
                          <el-checkbox-group v-model="customerOptions">
                            <el-checkbox v-for="item in customers" :key="item.id" :value="item.id">
                              {{ item.name }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </el-scrollbar>
                      </div>
                    </el-popover>
                  </template>
                </template>
                <template #default="scope">
                  <!-- 工单单号 -->
                  <template v-if="item.code === 'code'">
                    <span class="xy_main_btn" @click.stop="goDetail(scope.row)">{{
                      scope.row.code
                    }}</span>
                  </template>

                  <!--挂起 -->
                  <template v-if="item.code === 'isPause'">
                    <div>
                      <h-status v-if="scope.row.isPause === 1" type="warning">已挂起</h-status>
                    </div>
                  </template>
                  <!--状态 -->
                  <template v-if="item.code === 'status'">
                    <h-status v-if="scope.row.isPause === 1" type="warning">已挂起</h-status>
                    <div v-else class="flex-justify-between">
                      <h-status v-if="scope.row.status === 1" type="warning">待派单</h-status>
                      <h-status
                        :width="scope.row.newProgress || scope.row.reminder ? 54 : 90"
                        type="warning"
                        showOverText="待服务商确认"
                        v-if="scope.row.status === 2"
                      >
                        待服务商确认
                      </h-status>
                      <h-status v-if="scope.row.status === 3" type="warning">处理中</h-status>
                      <h-status v-if="scope.row.status === 4" type="success">已完成</h-status>
                      <h-status v-if="scope.row.status === 5" type="info">已取消</h-status>
                      <el-tooltip
                        v-if="scope.row.newProgress && ![4, 5].includes(scope.row.status)"
                        :show-after="600"
                        placement="top"
                      >
                        <template #content>
                          <span>{{ reminderCount || '加载中...' }}</span>
                        </template>
                        <div class="repeat" @mouseenter="OrderLastLogFun(scope.row.id)">
                          <i aria-hidden="true" class="fa fa-caret-left" style="color: #f13030"></i>
                          <span class="text_tip">NEW</span>
                        </div>
                      </el-tooltip>
                      <el-tooltip
                        v-if="scope.row.reminder && ![4, 5].includes(scope.row.status)"
                        placement="right"
                      >
                        <template #content>
                          <span>已催{{ scope.row.reminderCount }}次</span>
                        </template>
                        <span class="reminder">
                          <i
                            aria-hidden="true"
                            class="fa fa-volume-up"
                            style="padding-right: 2px; color: #007cff"
                          ></i>
                          已催
                        </span>
                      </el-tooltip>
                    </div>
                  </template>

                  <!-- 服务过程 -->
                  <template v-if="item.code === 'serviceProcess'">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        gap: 3px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                      "
                    >
                      <div style="display: flex; align-items: center">
                        <LeaveMessage
                          :workNo="scope.row.code"
                          :workId="scope.row.id"
                          @updated="getOrderListData"
                        >
                          <el-button
                            :icon="Edit"
                            color="#007cff"
                            link
                            style="padding: 0"
                            type="primary"
                          />
                        </LeaveMessage>
                      </div>
                      <div style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
                        >{{ scope.row.serviceProcess }}
                      </div>
                    </div>
                  </template>

                  <!-- 节点时效 -->
                  <template v-if="item.code === 'serviceTime'">
                    <div v-if="scope.row.nodeTimeout" class="node_time_out">
                      <HStatus type="error">已超时</HStatus>
                      <span style="color: #f56c6c"> {{ scope.row.nodeOverTime }} </span>
                    </div>
                  </template>

                  <!-- 服务商 -->
                  <template v-if="item.code === 'network'">
                    <span v-if="scope.row.network">{{ scope.row.network }}</span>
                    <span
                      v-else-if="scope.row.status == 1"
                      class="xy_main_btn"
                      @click.stop="changeNetWork(scope.row)"
                    >
                      选择接单服务商
                    </span>
                  </template>

                  <!--工单来源-->
                  <template v-if="item.code === 'source'">
                    <!-- 1-平台系统报单 2-扫码报单，3-小程序报单，4-APP报单，5-Excel导入报单，6-品牌商家建单，7-品牌商家报单，8-品牌商家Excel导入 -->
                    <span v-for="item in sources" :key="item.value">
                      <span v-if="scope.row.source === item.value">{{ item.title }}</span>
                    </span>
                  </template>

                  <template v-if="item.code === 'level'">
                    <span :style="{ color: scope.row.workLevelColor }">{{
                      scope.row.workLevel
                    }}</span>
                  </template>

                  <!-- 客户地址 -->
                  <template v-if="item.code === 'userAddress'">
                    <span>{{
                      `${scope.row.province} ${scope.row.city} ${scope.row.area} ${scope.row.town} ${scope.row.address}`
                    }}</span>
                  </template>

                  <!--总服务时长-->
                  <template v-if="item.code === 'totalServiceTime'">
                    <span :style="{ color: scope.row.serviceTimeColor }">{{
                      scope.row.serviceTime
                    }}</span>
                  </template>

                  <!--商家结算总价-->
                  <template v-if="item.code === 'factorySettlementTotalPrice'">
                    ￥{{ scope.row.factorySettlementTotalPrice.toFixed(2) }}
                  </template>

                  <!--服务商结算总价-->
                  <template v-if="item.code === 'networkSettlementTotalPrice'">
                    ￥{{ scope.row.networkSettlementTotalPrice.toFixed(2) }}
                  </template>

                  <!--异常费用-->
                  <template v-if="item.code === 'abnormalFee'">
                    ￥{{ scope.row.abnormalFee.toFixed(2) }}
                  </template>
                </template>
              </el-table-column>
            </template>

            <!-- 自定义字段 -->
            <el-table-column
              v-for="(key, index) in arrList"
              :key="index"
              :label="key.name"
              show-overflow-tooltip
              width="100"
            >
              <template #header>
                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                  {{ key.name }}
                </div>
              </template>
              <template #default="item">
                <template v-for="i in item.row.fieldVals">
                  {{ i.id == key.id ? i.val : '' }}
                </template>
              </template>
            </el-table-column>
            <!-- 表单设置 -->
            <el-table-column :align="'center'" fixed="right" width="38">
              <template #header>
                <el-tooltip content="列表设置" effect="dark" placement="top-start">
                  <el-image
                    :size="20"
                    :src="setSvg"
                    style="display: flex; align-items: center; justify-content: center; width: 16px"
                    @click="tableShowSet"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <!-- <el-table-column align="center" label="操作" width="80" fixed="right">
              <template v-slot="scope">
                <HLink @click="copyOrder(scope.row)">复制工单</HLink>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="pagination" style="flex: none">
          <Pagination
            ref="pagination"
            :list_total="orderListTotal"
            @size-change="getOrderListData"
            @current-change="getOrderListData"
          />
        </div>

        <AssignDialog
          :assignAny="assignAny"
          :assignDialog="assignDialog"
          :isbatch="isbatch"
          :selecttion="selecttion"
          @assign-dialog="onClearSelection"
          @update-list="
            () => {
              getOrderListData()
              selecttion = []
              arr = []
            }
          "
        />

        <AssignCustomerService
          :is-batch="isbatch"
          :selecttion="selecttion"
          v-model="assignCustomerServiceModalVisible"
          @update="onAssignCustomerServiceModalUpdate"
        />

        <!-- 列表设置 -->
        <TableVisibleDialog
          :dialogTableVisible="dialogTableVisible"
          :type="1"
          @update-list="
            () => {
              getOrderListData()
              getOrderListTableFieldList()
            }
          "
          @set-table-dialog="dialogTableVisible = $event"
        />

        <!-- 服务过程弹窗 -->
        <ServiceProcess
          v-model="noteModalVisible"
          :work-ids="selecttion"
          @updated="getOrderListData"
        />

        <!-- 导出字段弹窗 -->
        <FieldExport
          v-if="exportFieldFilter"
          :export-filter="exportFieldFilter"
          :modal-visible="exportFieldModalVisible"
          :getFilterDate="getFilter()"
          @close="
            () => {
              exportFieldModalVisible = false
              isbatch = true
            }
          "
        />

        <!-- 分派服务商弹窗 -->
        <AssignNetwork
          v-model="assignNetworkModalVisible"
          :address="userAddress"
          :isBatch="isbatch"
          :selecttion="selecttion"
          @update="onAssignNetworkUpdate"
        />

        <!--催单弹窗-->
        <Reminder
          v-model="reminderModalVisible"
          :order-ids="selecttion"
          @update="onReminderUpdate"
        />

        <!--超时提醒弹窗-->
        <TimeoutTip
          :order-ids="selecttion"
          :visible="timeoutTipModalVisible"
          @close="timeoutTipModalVisible = false"
          @succsee-close="succseeClose($event)"
        />

        <!--改派服务商弹窗-->
        <UpdateNetwork
          v-if="selectedTableData[0]"
          v-model="updateNetworkModalVisible"
          :address="userAddress"
          :network="selectedTableData[0].network ? selectedTableData[0].network : ''"
          :network-id="selectedTableData[0].networkId"
          :order-id="selectedTableData[0].id"
          @update-list="
            () => {
              getOrderListData()
              selecttion = []
              arr = []
            }
          "
        />

        <!--更改结算价弹窗-->
        <UpdateSettlementPrice
          v-if="selectedTableData[0]"
          v-model="updateSettlementPriceModalVisible"
          :old-factory-settlement-price="String(selectedTableData[0].factorySettlementPrice || '')"
          :old-network-settlement-price="String(selectedTableData[0].networkSettlementPrice || '')"
          :order-id="selectedTableData[0].id"
          @update-list="getOrderListData"
        />

        <!--归档弹窗-->
        <Archive
          :is-batch="isbatch"
          :selettion="selecttion"
          v-model="archiveModalVisible"
          @update="onArchiveModelUpdate"
        />

        <!--取消工单弹窗-->
        <CancelOrder
          :is-batch="isbatch"
          :selettion="selecttion"
          v-model="cancelOrderModalVisible"
          @update="onCancelModalUpdate"
        />

        <!--挂起/解除工单弹窗-->
        <PeddingOrder
          :is-batch="isbatch"
          :selettion="selecttion"
          v-model="peddingOrderModalVisible"
          @update="onPeddingModalUpdate"
        />

        <el-dialog v-model="showSuccsee" destroy-on-close draggable title="超时提醒" width="70%">
          <el-form v-if="showSuccseeInfo" :model="showSuccseeInfo" label-width="100px">
            <el-form-item label="提醒节点类型：">
              <span>{{ showSuccseeInfo.conditionType }}</span>
            </el-form-item>
            <el-form-item label="提醒人员类型：">
              <span>{{ showSuccseeInfo.remindEmp }}</span>
            </el-form-item>
            <el-form-item label="提醒失败备注：">
              <div style="max-height: 400px; font-size: 12px; overflow: auto; padding-right: 12px">
                <p v-for="(item, index) in showSuccseeInfo.remindRemark" :key="index">{{ item }}</p>
              </div>
            </el-form-item>
          </el-form>
          <template #footer>
            <div style="display: flex; justify-content: flex-end">
              <h-button is-modal @click="showSuccsee = false">关闭</h-button>
            </div>
          </template>
        </el-dialog>

        <!-- 完成工单弹窗 -->
        <FinishOrder
          :is-batch="isbatch"
          v-model="finishOrderModalVisible"
          :wordIds="selecttion"
          @update="getOrderListData"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Pagination from '@/components/Pagination/index.vue'
  import { onMounted, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import type { TableInstance } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import { ArrowDown, Edit, RefreshRight, Search } from '@element-plus/icons-vue'
  import {
    axiosCancel,
    getOrderLastLog,
    getOrderListTableField,
    getOrderListTableTitleField,
    workLevelPageSelect,
    workModulePageSelect,
  } from '@/api/order'
  import { empPageSelecct } from '@/api/organize'
  import { getNetworkPageSelect } from '@/api/network'
  import debounce from 'lodash/debounce'
  import AssignDialog from './components/AssignDialog.vue'
  import TableVisibleDialog from '../../../components/TableVisibleDialog.vue'
  import _ from 'lodash'
  import setSvg from '@/assets/order/set.svg'
  import { Order, OrderListTableField } from './types'
  import Filter from './components/Filter.vue'
  import FieldExport from '@/components/pages/order/index/FieldExport/FieldExport.vue'
  import OrderListStatusTabs from './components/OrderListStatusTabs/index.vue'
  import Reminder from '@/components/pages/order/index/Reminder/Reminder.vue'
  import TimeoutTip from '@/components/pages/order/index/TimeoutTip/TimeoutTip.vue'
  import AssignCustomerService from '@/components/pages/order/index/AssignCustomerService/AssignCustomerService.vue'
  import FinishOrder from '@/components/pages/order/index/FinishOrder/FinishOrder.vue'
  import Archive from '@/components/pages/order/index/Archive/Archive.vue'
  import AssignNetwork from '@/components/pages/order/index/AssignNetwork/AssignNetwork.vue'
  import ServiceProcess from '@/components/pages/order/index/ServiceProcess/ServiceProcess.vue'
  import CancelOrder from '@/components/pages/order/index/CancelOrder/CancelOrder.vue'
  import PeddingOrder from '@/components/pages/order/index/PeddingOrder/PeddingOrder.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import pageComponentName from '@/config/page-component-name'
  import LeaveMessage from './odetail/components/leaveMessage.vue'
  import useOrderListService from '@/services/module/order/useOrderListService'

  const { orderList, orderListTotal, getOrderListParam, getOrderListLoading, getOrderList } =
    useOrderListService()

  defineOptions({
    name: pageComponentName.order.orderList,
  })

  /**
   * 取消工单弹窗组件的显示状态
   */
  const cancelOrderModalVisible = ref(false)

  /**
   * 取消工单更新
   */
  const onCancelModalUpdate = () => {
    getOrderListData()
    selecttion.value = []
    arr.value = []
  }

  /**
   * 催单更新
   */
  const onReminderUpdate = () => {
    getOrderListData()
    selecttion.value = []
    arr.value = []
  }

  /**
   * 分派服务商更新
   */
  const onAssignNetworkUpdate = () => {
    getOrderListData()
    selecttion.value = []
    arr.value = []
  }

  /**
   * 归档弹窗显示的状态
   */
  const archiveModalVisible = ref(false)

  /**
   * 归档弹窗更新
   */
  const onArchiveModelUpdate = () => {
    getOrderListData()
    selecttion.value = []
    arr.value = []
  }

  /**
   * 分派客服弹窗的显示状态
   */
  const assignCustomerServiceModalVisible = ref(false)

  /**
   * 分派客服弹窗更新
   */
  const onAssignCustomerServiceModalUpdate = () => {
    getOrderListData()
    selecttion.value = []
    arr.value = []
  }

  // 完成工单弹窗显示状态
  const finishOrderModalVisible = ref(false)

  // 更改结算价弹窗显示状态
  const updateSettlementPriceModalVisible = ref(false)

  // 改派服务商弹窗的显示状态
  const updateNetworkModalVisible = ref(false)
  const childStatus = ref(0) //子状态

  const showSuccsee = ref(false)
  const showSuccseeInfo = ref()
  const succseeClose = (val) => {
    selectedTableData.value = []
    tableList.value.clearSelection()
    if (val) {
      showSuccseeInfo.value = val
      showSuccsee.value = true
    }
  }

  /**
   * 显示改派服务商弹窗
   */
  const onShowUpdateNetworkModal = () => {
    if (selectedTableData.value.length > 1) {
      ElMessage({
        type: 'error',
        message: '只能选择一张工单',
      })
      return false
    }

    const order = selectedTableData.value[0]
    if (order.status !== 3) {
      ElMessage({
        type: 'error',
        message: '处理中的工单才能改派服务商',
      })
      return false
    }

    Object.assign(userAddress.value, {
      province: order.province,
      city: order.city,
      area: order.area,
      town: order.town,
      address: order.address,
    })

    updateNetworkModalVisible.value = true
  }

  /**
   * 客户地址
   * 用于用户只选中一张工单然后分派服务商然后筛选出该地址内的服务商
   */
  const userAddress = ref({
    province: '',
    city: '',
    area: '',
    town: '',
    address: '',
  })

  /**
   * 分派服务商按钮点击事件
   */
  const handleAssignNetworkClick = () => {
    if (selecttion.value.length === 1) {
      const order = orderList.value.find((item) => item.id === selecttion.value[0])
      if (order) {
        Object.assign(userAddress.value, {
          province: order.province,
          city: order.city,
          area: order.area,
          town: order.town,
          address: order.address,
        })
      }
    }

    assignNetworkModalVisible.value = true
  }

  // 催单弹窗状态
  const reminderModalVisible = ref(false)

  // 超时提醒弹窗状态
  const timeoutTipModalVisible = ref(false)

  // 获取列表的筛选组件实例
  const getListFilterRef = ref<InstanceType<typeof Filter> | null>(null)

  // 列表状态筛选组件实例
  const orderListStatusTabsRef = ref<InstanceType<typeof OrderListStatusTabs> | null>(null)
  let isbatch = ref(true)
  const listFilterStatus = ref(0)
  const router = useRouter()
  const loading = ref(false)
  const moduleLoading = ref(false) //下拉工单模块loading

  const pagination = ref()
  // 弹窗显示
  const assignDialog = ref(false) //分派
  const assignAny = ref(null) //分派1 2 3 4

  //自定义字段
  let arrList = ref([])

  const tableList = ref<TableInstance | null>(null) // 表格Dom

  // 弹出层Dom 1-报单时间 2-工单类型 3-产品型号 4-等级 5-费用 6-服务商 7-服务时长 8-工单来源 9-客服
  const popoverDom2 = ref()
  const popoverDom4 = ref()
  const popoverDom5 = ref()
  const popoverDom6 = ref()
  const popoverDom7 = ref()
  const popoverDom8 = ref()
  const popoverDom9 = ref()

  // 表头搜索
  const ordeModule = ref('') // 工单类型
  const orderGrade = ref('') // 等级
  const maxCost = ref(null) // 最大值
  const minCost = ref(null) // 最小值
  const workName = ref('') // 服务商名称
  const maxTime = ref(null) // 服务时长最大值
  const minTime = ref(null) // 服务时长最小值
  const customer = ref('') // 客服

  // 网点类型：1-已派单，0-未派单，传空值则查询所有
  const networkType = ref<OrderRequestParam.OrderList['networkType']>('')
  const radio4 = ref(null)
  // 搜索条件显示 1-工单类型 2-报单商品 3-等级 4-工单来源 5-服务商 8-客服
  const condition1 = ref([])
  const condition2 = ref([])
  const condition3 = ref([])
  const condition4 = ref([])
  const condition5 = ref([])
  const condition8 = ref([])
  // 是否全选 1-工单类型 2-报单商品 3-等级 4-工单来源  5-服务商 8-客服
  const checkAll1 = ref(false)
  const checkAll3 = ref(false)
  const checkAll4 = ref(false)
  const checkAll5 = ref(false)
  const checkAll8 = ref(false)

  // 工单类型
  const moduleOptions = ref([])
  const modules = ref(null)
  // 等级
  const gradeOptions = ref([])
  const grades = ref(null)

  // 服务商
  const networkOptions = ref([])
  const networkSelectData = ref([])
  const reminderCount = ref('')
  const OrderLastLogFun = _.debounce((id) => {
    reminderCount.value = ''
    axiosCancel()
    getOrderLastLog(id).then((res) => {
      if (res) {
        reminderCount.value =
          res.data.data.row.createTime +
          ' 【' +
          res.data.data.row.type +
          '】' +
          res.data.data.row.createEmp +
          ' ' +
          res.data.data.row.event
      }
    })
  }, 300)
  // 工单来源
  const sourceOptions = ref([])

  const sources = ref([
    { title: '平台系统报单', value: 1 },
    { title: '扫码报单', value: 2 },
    { title: '小程序报单', value: 3 },
    { title: 'APP报单', value: 4 },
    { title: 'Excel导入报单', value: 5 },
    { title: '品牌商家建单', value: 6 },
    { title: '平台代商家报单', value: 7 },
    { title: '品牌商家Excel导入', value: 8 },
    { title: '乐开伙伴云', value: 9 },
  ])

  // 客服
  const customerOptions = ref([])
  const customers = ref(null)

  // 表格每一列的宽度
  const tableColumnWidth = ref({
    code: '140', // 工单编号
    createTime: '128', // 报单时间
    factory: '100', // 商家名称
    factorySettlementTotalPrice: '100', // 商家结算总价
    networkSettlementTotalPrice: '120', // 服务商结算总价
    status: '182', // 工单状态
    module: '160', // 工单类型
    userName: '90', // 客户姓名
    userPhone: '104', // 客户手机号
    userAddress: '300', // 客户地址
    orderGoods: '200', // 报单商品
    network: '160', // 服务商
    engineer: '80', // 工程师
    reservationDate: '128', // 预约时间
    serviceTime: '180', // 节点时效
    emp: '90', // 客服
    totalPrice: '120', // 工单总费用
    source: '110', // 工单来源
  })

  // 工单类型下拉数据
  const getworkModulePageSelect = async (val) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    moduleLoading.value = true
    const res = await workModulePageSelect(data)
    modules.value = []
    if (res.data.success) {
      modules.value = res.data.data.rows
    }
    moduleLoading.value = false
  }

  // 获取服务商下拉数据
  const getNetworkPageSelectData = (val) => {
    const networkSearch = {
      name: val, // 服务商名称
      page: 1,
      limit: 100,
    }
    networkSelectData.value = []
    getNetworkPageSelect(networkSearch).then((res) => {
      networkSelectData.value = res.data.data.rows
    })
  }

  // 工单客服组下拉列表查询
  const getworkTeamPageSelect = async (val) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    loading.value = true
    customers.value = []
    const res = await empPageSelecct(data)
    if (res.data.success) {
      customers.value = res.data.data.rows
    }
    loading.value = false
  }

  // 等级下拉数据
  const getworkLevelPageSelect = async (val) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    moduleLoading.value = true
    grades.value = []
    await workLevelPageSelect(data).then((res) => {
      if (res.data.success) {
        grades.value = res.data.data.rows
      }
      moduleLoading.value = false
    })
  }

  const handleChangeFilterStatus = (
    status: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 2000 | 2001 | 2002,
    childStatusIndex: 0 | 1 | 2 | 3 | 4 | 5,
  ) => {
    listFilterStatus.value = status
    childStatus.value = childStatusIndex
    getOrderListData()
  }

  // 表格选中的数据
  const selectedTableData = ref<Array<Order>>([])

  // 获取表格选中的数据
  const selecttion = ref<Array<string>>([])
  const arr = ref([])

  /**
   * 表格行选择事件
   * @param {Object} val 选中的那一行的数据
   */
  const handleChange = (val: Array<Order>) => {
    selectedTableData.value = []
    selecttion.value = []
    if (val.length != 0) {
      arr.value = []
      val.forEach((item) => {
        arr.value.push(item.id)
        selecttion.value.push(item.id)
        selectedTableData.value.push(item)
      })
    }
  }
  // 单击勾选选中当前一行
  const rowClick = (item) => {
    tableList.value.toggleRowSelection(item, !selecttion.value.includes(item.id))
  }
  // 重置
  const clearValue = () => {
    if (getListFilterRef.value) {
      getListFilterRef.value.reset()
    }
    selecttion.value = []
    maxTime.value = null
    minTime.value = null
    minCost.value = null
    maxCost.value = null
    radio4.value = null
    checkAll1.value = false
    checkAll3.value = false
    checkAll4.value = false
    checkAll5.value = false
    checkAll8.value = false
    ordeModule.value = ''
    orderGrade.value = ''
    customer.value = ''
    moduleOptions.value = []
    gradeOptions.value = []
    sourceOptions.value = []
    customerOptions.value = []
    networkType.value = ''
    networkOptions.value = []
    getworkModulePageSelect('')
    getworkLevelPageSelect('')
    getworkTeamPageSelect('')
    getNetworkPageSelectData('')
    getOrderListData()
  }
  // 搜索显示tag 1工单类型 2报单商品 3等级 4工单来源 5-服务商 6费用 7服务时长 8-客服
  const tagClose = (n: number) => {
    switch (n) {
      case 1:
        moduleOptions.value = []
        condition1.value = []
        break
      case 2:
        condition2.value = []
        break
      case 3:
        gradeOptions.value = []
        condition3.value = []
        break
      case 4:
        sourceOptions.value = []
        condition4.value = []
        break
      case 5:
        networkOptions.value = []
        condition5.value = []
        networkType.value = ''
        break
      case 6:
        minCost.value = null
        maxCost.value = null
        break
      case 7:
        minTime.value = null
        maxTime.value = null
        radio4.value = null
        break
      case 8:
        customerOptions.value = []
        condition8.value = []

        break
    }
  }

  // 1-批量分配客服 2- 批量分派服务商 3-批量完成工单 4-批量取消工单
  // const assignHandle = (n: number, val = null) => {
  //   if (val) {
  //     selecttion.value = [val]
  //   } else {
  //     selecttion.value = arr.value
  //   }
  //   if (selecttion.value.length == 0) {
  //     ElMessage({
  //       message: '请选择要操作的工单',
  //       type: 'warning',
  //     })
  //     return
  //   }
  //   assignAny.value = n
  //   assignDialog.value = true
  // }

  // 选择服务商
  function changeNetWork(order: Order) {
    isbatch.value = false
    if (tableList.value) {
      tableList.value.clearSelection()
      tableList.value.toggleRowSelection(order, undefined)
    }
    arr.value = [order.id]
    selecttion.value = [order.id]
    handleAssignNetworkClick()
  }

  /**
   * 服务过程编辑按钮点击事件
   * @param {object} order - 工单对象
   */
  // const workId = ref('')
  // const workNo = ref('')
  // const handleEditServiceProcessBtnClick = (order: Order) => {
  // isbatch.value = false
  // if (tableList.value) {
  //   tableList.value.clearSelection()
  //   tableList.value.toggleRowSelection(order, undefined)
  // }
  // arr.value = [order.id]
  // selecttion.value = [order.id]
  // workId.value = order.id
  // workNo.value = order.code
  // noteModalVisible.value = true
  // }

  // 查看工单详细
  const goDetail = (val: Order) => {
    router.push('/order/odetail/' + val.id)
  }

  // 1-工单类型 2-报单商品 3-等级 5-服务商 8-客服
  const onclearinput = (n: number) => {
    switch (n) {
      case 1:
        getworkModulePageSelect('')
        break
      case 3:
        getworkLevelPageSelect('')
        break
      case 5:
        getNetworkPageSelectData('')
        break
      case 8:
        getworkTeamPageSelect('')
        break
    }
  }
  //@input搜索 1-工单类型 2-报单商品 3-等级 4-费用 5-服务商 6-服务时长  8-客服
  const confirmSearch = debounce((n: number) => {
    if (n == 1) {
      checkAll1.value = false
      getworkModulePageSelect(ordeModule.value)
    }
    if (n == 3) {
      checkAll3.value = false
      getworkLevelPageSelect(orderGrade.value)
    }
    if (n == 4) {
      if (minCost.value || maxCost.value) {
        if (!maxCost.value) {
          return
        }
        if (!minCost.value) {
          minCost.value = 0
        }
      }
      if (minCost.value && maxCost.value) {
        minCost.value = Number(minCost.value)
        maxCost.value = Number(maxCost.value)
      }
      getOrderListData()
    }
    if (n == 5) {
      checkAll5.value = false
      getNetworkPageSelectData(workName.value)
    }
    if (n == 6) {
      if (minTime.value || maxTime.value) {
        if (!maxTime.value) {
          return
        }
        if (!minTime.value) {
          minTime.value = 0
        }
      }
      getOrderListData()
    }
    if (n == 8) {
      checkAll8.value = false
      getworkTeamPageSelect(customer.value)
    }
  }, 0)

  //全选@change 1-工单类型 2-报单商品 3-等级 4-工单来源  5-服务商 8-客服
  const changeChecked1 = (val) => {
    if (modules.value.length > 0) {
      modules.value.map((o) => {
        if (val) {
          moduleOptions.value = [...moduleOptions.value, o.id]
        } else {
          moduleOptions.value = moduleOptions.value.filter((i) => i != o.id)
        }
      })
    }
  }
  const changeChecked3 = (val) => {
    if (grades.value.length > 0) {
      grades.value.map((o) => {
        if (val) {
          gradeOptions.value = [...gradeOptions.value, o.id]
        } else {
          gradeOptions.value = gradeOptions.value.filter((i) => i != o.id)
        }
      })
    }
  }
  const changeChecked4 = (val) => {
    if (val) {
      sourceOptions.value = sources.value.map((o) => {
        return o.value
      })
    } else {
      sourceOptions.value = []
    }
  }

  const changeChecked5 = (val) => {
    if (networkSelectData.value.length > 0) {
      networkSelectData.value.map((o) => {
        if (val) {
          networkOptions.value = [...networkOptions.value, o.id]
        } else {
          networkOptions.value = networkOptions.value.filter((i) => i != o.id)
        }
      })
    }
  }
  const changeChecked8 = (val) => {
    if (customers.value.length > 0) {
      customers.value.map((o) => {
        if (val) {
          customerOptions.value = [...customerOptions.value, o.id]
        } else {
          customerOptions.value = customerOptions.value.filter((i) => i != o.id)
        }
      })
    }
  }

  // 节点时效筛选
  const serviceTimeFilter = ref('')

  // 获取filter
  const getFilter = () => {
    let tab
    if (listFilterStatus.value === 0) {
      //判断是切换为全部工单
      tab = null
    } else {
      tab = listFilterStatus.value
    }
    // 服务时长类型
    if (!(radio4.value && maxTime.value)) {
      radio4.value = null
      maxTime.value = null
      minTime.value = null
    }

    let result: null | OrderRequestParam.OrderList = null

    if (getListFilterRef.value) {
      const filter = getListFilterRef.value.getFilter()
      if (filter) {
        result = {
          dateFieldType: filter.dateFieldType, // 时间字段类型：1-报单日期，2-完工日期，3-结算日期
          dateType: filter.dateType, //报单时间类型
          empIds: customerOptions.value, //客服ID
          fieldId: filter.fieldId, //工单字段名
          fieldSearch: filter.fieldSearch, //工单字段搜索关键词
          networkType: networkType.value, //服务商类型
          // networkIds: networkOptions.value, //	服务区域ID
          limit: pagination.value.size, //每页显示数量
          maxPrice: maxCost.value, //费用最大值
          maxServiceTime: Number(maxTime.value), //最大服务时长值
          orderNodeTimeoutType: serviceTimeFilter.value ? serviceTimeFilter.value : null, // 工单节点时效类型：0-未超时工单，1-已超时工单
          minPrice: minCost.value, //费用最小值
          minServiceTime: minTime.value, //最小服务时长值
          // moduleIds: moduleOptions.value, //工单模块ID
          orderEndTime: filter.orderEndTime, //报单结束时间
          orderNo: filter.orderNo ? filter.orderNo.trim() : filter.orderNo, //工单单号
          orderStartTime: filter.orderStartTime, //报单开始时间
          page: pagination.value.current, //当面页码
          serviceTimeType: radio4.value, //服务时长类型
          // sources: sourceOptions.value, //工单来源
          status: [2000, 2001, 2002].includes(tab) ? '' : tab, //工单状态
          goodsSearch: filter.goodsSearch ? filter.goodsSearch.trim() : filter.goodsSearch, //	商品搜索：品牌/产品名称/产品型号
          orderUserSearch: filter.orderUserSearch
            ? filter.orderUserSearch.trim()
            : filter.orderUserSearch, // 工单客户搜索关键词：客户名称/客户手机号/客户地址
          workLevelIds: gradeOptions.value, //等级ID
          childStatus: childStatus.value,
          factoryIds: filter.factoryIds, //商家ID
          // status: filter.status ||tab,
          networkIds: filter.networkIds, //网点
          moduleIds: filter.moduleIds || moduleOptions.value,
          sources: filter.sources || sourceOptions.value,
          province: filter.province,
          city: filter.city,
          area: filter.area,
          addresses: filter.addresses, //多选框地址
          isPause: tab === 2000 || filter.statusList.includes(2000) ? 1 : 0, // 挂起
          isHx: tab === 2001 || filter.statusList.includes(2001) ? 1 : 0, // 待核销
          isHs: tab === 2002 || filter.statusList.includes(2002) ? 1 : 0, // 待核实上门时间
          statusList: _.cloneDeep(filter.statusList).filter(
            (item) => ![2000, 2001, 2002].includes(item),
          ),
        }
      }
    }

    return result
  }

  //获取工单列表
  const getOrderListData = _.debounce(async () => {
    const filter = getFilter()
    if (filter && orderListStatusTabsRef.value) {
      try {
        getOrderListParam.value = filter
        await getOrderList()
        if (orderListStatusTabsRef.value) {
          await orderListStatusTabsRef.value.getOrderStatusQtyData()
        }

        if (orderList.value.some((o) => o.newProgress && o.reminder)) {
          tableColumnWidth.value.status = '182'
        } else if (orderList.value.some((o) => o.newProgress && !o.reminder)) {
          tableColumnWidth.value.status = '130'
        } else if (orderList.value.some((o) => !o.newProgress && o.reminder)) {
          tableColumnWidth.value.status = '140'
        }
      } catch (errMsg) {
        // HMessageBox.error(errMsg)
      }
    }
  }, 0)

  const getOrderListTableTitleFieldList = async () => {
    const res = await getOrderListTableTitleField()
    if (res.data.success) {
      arrList.value = res.data.data.rows
    }
  }

  // 获取工单列表表头字段
  const dialogTableVisible = ref(false)
  const OrderListTable = ref<Array<OrderListTableField>>([])
  const getOrderListTableFieldList = () => {
    getOrderListTableField(1).then((res) => {
      if (res) {
        OrderListTable.value = res.data.data.rows
      }
    })
  }

  // 点击列表设置
  const tableShowSet = () => {
    dialogTableVisible.value = true
  }

  // 导出字段的筛选
  const exportFieldFilter = ref<OrderRequestParam.OrderList | null>(null)

  // 导出字段弹窗状态
  const exportFieldModalVisible = ref(false)

  // 保存并导出
  const onExport = () => {
    let tab
    if (listFilterStatus.value === 0) {
      //判断是切换为全部工单
      tab = null
    } else {
      tab = listFilterStatus.value
    }
    // 服务时长类型
    if (!(radio4.value && maxTime.value)) {
      radio4.value = null
      maxTime.value = null
      minTime.value = null
    }
    const filter = getListFilterRef.value.getFilter()

    exportFieldFilter.value = {
      dateFieldType: '', // 时间字段类型：1-报单日期，2-完工日期，3-结算日期
      dateType: '', //报单时间类型
      empIds: customerOptions.value, //客服ID
      fieldId: '', //工单字段名
      fieldSearch: '', //工单字段搜索关键词
      networkType: networkType.value, //服务商类型
      networkIds: networkOptions.value, //	服务区域ID
      limit: pagination.value.size, //每页显示数量
      maxPrice: maxCost.value, //费用最大值
      maxServiceTime: Number(maxTime.value), //最大服务时长值
      minPrice: minCost.value, //费用最小值
      minServiceTime: minTime.value, //最小服务时长值
      moduleIds: moduleOptions.value, //工单模块ID
      orderEndTime: '', //报单结束时间
      orderNo: '', //工单单号
      orderStartTime: '', //报单开始时间
      page: pagination.value.current, //当面页码
      serviceTimeType: radio4.value, //服务时长类型
      sources: sourceOptions.value, //工单来源
      status: tab, //工单状态
      goodsSearch: '', //	商品搜索：品牌/产品名称/产品型号
      orderUserSearch: '', // 工单客户搜索关键词：客户名称/客户手机号/客户地址
      workLevelIds: gradeOptions.value, //等级ID
      orderNodeTimeoutType: serviceTimeFilter.value ? serviceTimeFilter.value : '', // 工单节点时效类型：0-未超时工单，1-已超时工单
      childStatus: childStatus.value,
      addresses: filter.addresses, //多选框地址
      network: filter.network, // 服务商
    }

    exportFieldModalVisible.value = true
  }

  // 备注弹窗状态
  const noteModalVisible = ref(false)

  // 清空选择项
  const onClearSelection = () => {
    assignDialog.value = false
    isbatch.value = true
    arr.value = []
    selecttion.value = []
    tableList.value.clearSelection()
  }

  // 分配服务商弹窗状态
  const assignNetworkModalVisible = ref(false)

  // 挂起
  const handlePending = () => {
    peddingOrderModalVisible.value = true
  }
  /**
   * 挂起/解除工单弹窗组件的显示状态
   */
  const peddingOrderModalVisible = ref(false)

  /**
   * 挂起/解除工单更新
   */
  const onPeddingModalUpdate = () => {
    getOrderListData()
    selecttion.value = []
    arr.value = []
  }

  const handleFilterChangeOrderStatus = (
    data: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 2000 | 2001 | 2002,
  ) => {
    if (orderListStatusTabsRef.value) {
      orderListStatusTabsRef.value.setStatus(data)
    }
  }

  // 复制工单
  const copyOrder = () => {
    if (selectedTableData.value[0]) {
      const id = selectedTableData.value[0].id
      router.push('/order/new?isCopy=1&id=' + id)
    }
  }

  // 监听
  watch(
    () => networkType.value,
    () => {
      if (networkType.value === 1) {
        getNetworkPageSelectData('')
      } else {
        networkOptions.value = []
      }
      getOrderListData()
    },
  )

  // 监听勾选 1-工单类型 2-报单商品 3-等级 4-工单来源 5-客服 8-服务商
  watch(moduleOptions, (val) => {
    moduleOptions.value = val
    checkAll1.value = modules.value.every((o) => {
      return moduleOptions.value.includes(o.id)
    })
    modules.value.filter((o) => {
      if (moduleOptions.value.includes(o.id)) {
        if (condition1.value.length > 0) {
          if (!condition1.value.some((i) => i.id == o.id)) {
            condition1.value.push(o)
          }
        } else {
          condition1.value.push(o)
        }
      }
    })
    let arr = condition1.value
    condition1.value = []
    moduleOptions.value.map((o) => {
      arr.filter((i) => {
        if (i.id == o) {
          condition1.value.push(i)
        }
      })
    })
    getOrderListData()
  })

  watch(gradeOptions, (val) => {
    gradeOptions.value = val
    checkAll3.value = grades.value.every((o) => {
      return gradeOptions.value.includes(o.id)
    })
    grades.value.filter((o) => {
      if (gradeOptions.value.includes(o.id)) {
        if (condition3.value.length > 0) {
          if (!condition3.value.some((i) => i.id == o.id)) {
            condition3.value.push(o)
          }
        } else {
          condition3.value.push(o)
        }
      }
    })
    let arr = condition3.value
    condition3.value = []
    gradeOptions.value.map((o) => {
      arr.filter((i) => {
        if (i.id == o) {
          condition3.value.push(i)
        }
      })
    })
    getOrderListData()
  })

  watch(sourceOptions, (val) => {
    sourceOptions.value = val
    checkAll4.value = sources.value.every((o) => {
      return sourceOptions.value.includes(o.value)
    })
    condition4.value = []
    sources.value.filter((o) => {
      if (sourceOptions.value.includes(o.value)) {
        condition4.value.push(o.title)
      }
    })
    getOrderListData()
  })

  //服务商
  watch(networkOptions, (val) => {
    networkOptions.value = val
    checkAll5.value = networkSelectData.value.every((o) => {
      return networkOptions.value.includes(o.id)
    })
    networkSelectData.value.filter((o) => {
      if (networkOptions.value.includes(o.id)) {
        if (condition5.value.length > 0) {
          if (!condition5.value.some((i) => i.id == o.id)) {
            condition5.value.push(o)
          }
        } else {
          condition5.value.push(o)
        }
      }
    })
    let arr = condition5.value
    condition5.value = []
    networkOptions.value.map((o) => {
      arr.filter((i) => {
        if (i.id == o) {
          condition5.value.push(i)
        }
      })
    })
    getOrderListData()
  })

  watch(customerOptions, (val) => {
    customerOptions.value = val
    checkAll8.value = customers.value.every((o) => {
      return customerOptions.value.includes(o.id)
    })
    customers.value.filter((o) => {
      if (customerOptions.value.includes(o.id)) {
        if (condition8.value.length > 0) {
          if (!condition8.value.some((i) => i.id == o.id)) {
            condition8.value.push(o)
          }
        } else {
          condition8.value.push(o)
        }
      }
    })
    let arr = condition8.value
    condition8.value = []
    customerOptions.value.map((o) => {
      arr.filter((i) => {
        if (i.id == o) {
          condition8.value.push(i)
        }
      })
    })
    getOrderListData()
  })

  onMounted(() => {
    new Promise(() => {
      getOrderListData()
      getOrderListTableTitleFieldList()
      getOrderListTableFieldList()
      getworkModulePageSelect('')
      getworkLevelPageSelect('')
      getworkTeamPageSelect('')
    })
  })
</script>

<style lang="scss" scoped>
  @import './index';
</style>
